<template>
	<view class="container">
		<view class="content">
			<view class="sama_title"> 扫描门锁二维码或手动输入门锁编号 </view>
			<view class="scan_lay">
				<input placeholder="扫一扫二维码或输入编号" v-model="QRCode" />
				<image @click="openWXscan()" src="../../../static/icon/add_scan.png"></image>
			</view>

		</view>
		<view class="bootom_lay">
			<!-- <view v-if="hotel.suAnCodeIsNull == '1'" @click="handlerSkip()">跳过此步骤</view> -->
			<view :style="{opacity:(QRCode?1:0.5) }" @click="nextStep()">下一步</view>
		</view>

		<uni-popup ref="alertDialog" type="dialog">
			<view class="d_root">
				<view class="d_hetol_title">当前二维码有误</view>
				<view class="option">
					<view class="cancel" @click="onclickCancel()">重新扫码</view>
					<view class="commit" @click="onclickCommit()">手动输入</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import util from '../../../utils/util.js'
	export default {
		data() {
			return {
				QRCode: '', // 二维码信息
			}
		},
		onShow() {
			// this.openWXscan();
		},
		methods: {
			openWXscan() {
				uni.scanCode({
					scanType: ['qrCode'],
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						if (res && res.result) {
							const arr = res.result.split('&');
							this.QRCode = arr[0];
						}
					}
				})
			},
			nextStep() {
				if (this.QRCode.length == 0) {
					util.toast("锁编号不能为空", 'error')
					return
				};
				let path = '/pages/mine/upgrade/upgrade?lockNo=' + this.QRCode;
				uni.redirectTo({
					url: path
				})

			},
		}
	}
</script>

<style lang="less">
	.container {
		background-color: white;
		font-size: 32rpx;

		.bootom_lay {
			position: absolute;
			bottom: 0rpx;
			left: 32rpx;
			right: 32rpx;
			bottom: 40rpx;

			:nth-child(1) {

				text-align: center;
				margin-top: 20rpx;
				color: #ffffff;
				line-height: 88rpx;
				height: 88rpx;
				border-radius: 10px;
				border: 1px solid #1D78F7;
				background: linear-gradient(135deg, #4593FF, #1C78F7);
				border-radius: 10px;
			}
		}

		.content {
			position: absolute;
			left: 0rpx;
			right: 0rpx;
			bottom: 0rpx;
			top: 0rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			margin-top: 72rpx;

			.sama_title {
				color: #1F2642;
				font-weight: bold;
			}

			.scan_lay {
				margin-top: 40rpx;
				display: flex;
				background: #F8F8FA;
				border-radius: 10px;
				// padding-left: 24rpx;				
				align-items: center;

				input {
					flex: 1;
					color: #1F2642;
					height: 50px;
					line-height: 50px;
					padding-left: 10px;
				}

				image {
					padding: 10px 15px;
					width: 30px;
					height: 30px;
				}
			}
		}
	}
</style>